<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>游戏测评中心</title>
    {% load staticfiles %}
    <link rel="stylesheet" href="{% static 'styles.css' %}">

</head>
<body>
    <div id="app">
        <header class="header">
            <div class="logo">
                <h1>GAME REVIEW HUB</h1>
            </div>
            <nav class="nav">
                <a href="http://127.0.0.1:8000/" class="nav-item active">首页</a>
                <a href="{% static 'games.html' %}" class="nav-item">游戏</a>
                <a href="{% static 'reviews.html' %}" class="nav-item">测评</a>
                <button class="login-btn" v-if="is_login">[[username]]</button>
                <a class="nav-item" href='{% url 'users:logout' %}' v-if="is_login">退出登录</a>
                <button class="login-btn" onclick="toggleLogin()" v-else>登录</button>

            </nav>
        </header>

    <main class="hero-section">
        <div class="hero-content">
            <h1>GAME REVIEW HUB</h1>
            <p class="hero-subtitle">探索无尽的游戏世界</p>
            <div class="hero-buttons">
                <a href="{% static 'games.html' %}" class="primary-btn">开始探索</a>
                <button class="secondary-btn">了解更多</button>
            </div>
        </div>
    </main>

    <section class="game-grid">
        <!-- 游戏卡片网格 -->
        <div class="game-card">
            <div class="card-image">
                <img src="https://via.placeholder.com/300x200" alt="游戏1">
            </div>
            <div class="rating">
                <span class="star">★★★★</span>
            </div>
            <div class="card-content">
                <h3>游戏标题</h3>
                <p>游戏简介...</p>
            </div>
        </div>
        <!-- 更多游戏卡片 -->
    </section>

    <div class="login-modal" id="loginModal" >
        <div class="login-container">
            <button class="close-btn" onclick="toggleLogin()">&times;</button>
            <h2>登录账号</h2>
            <form class="login-form"  method="POST">
                {% csrf_token %}
                <div class="form-group">
                    <input type="text" name="mobile" placeholder="" autofocus="autofocus" required id="id_login"  v-model="mobile" @blur="check_mobile"/>
                    <label for="username">用户名</label>
                </div>
                <div class="form-group">
                    <input type="password" name="password" placeholder="" required id="id_password" v-model="password" @blur="check_password"/>
                    <label for="password">密码</label>
                </div>
                <div class="form-options">
                    <label class="remember-me">
                        <input type="checkbox" name="remember" id="id_remember" checked  v-model="remembered"/>
                        <span>记住我</span>
                    </label>
                    <a href="#" class="forgot-password">忘记密码？</a>
                </div>
                <button type="submit" id="submit_login" @click="on_submit" class="login-submit-btn">登录</button>
            </form>
            <p class="register-link">
                还没有账号？ <a href="{% url 'users:register' %}">立即注册</a>
            </p>
        </div>
    </div>

    <div class="register-modal" id="registerModal">
        <div class="register-container">
            <button class="close-btn" onclick="toggleRegister()">&times;</button>
            <h2>创建账号</h2>
            <form class="register-form" onsubmit="handleRegister(event)">
                <div class="form-group">
                    <input type="text" id="reg-username" required>
                    <label for="reg-username">用户名</label>
                </div>
                <div class="form-group">
                    <input type="password" id="reg-password" required>
                    <label for="reg-password">密码</label>
                </div>
                <div class="form-group">
                    <input type="password" id="reg-confirm-password" required>
                    <label for="reg-confirm-password">确认密码</label>
                </div>
                <div class="form-group phone-group">
                    <input type="tel" id="reg-phone" pattern="[0-9]{11}" required>
                    <label for="reg-phone">手机号码</label>
                    <button type="button" class="send-code-btn" onclick="sendVerificationCode()">
                        发送验证码
                    </button>
                </div>
                <div class="form-group">
                    <input type="text" id="phone-code" maxlength="6" required>
                    <label for="phone-code">短信验证码</label>
                </div>
                <div class="form-group captcha-group">
                    <input type="text" id="captcha" maxlength="4" required>
                    <label for="captcha">图形验证码</label>
                    <div class="captcha-wrapper">
                        <img id="captchaImage" src="https://via.placeholder.com/100x38" alt="验证码">
                        <button type="button" class="refresh-captcha" onclick="refreshCaptcha()">
                            <i class="fas fa-sync-alt"></i>
                        </button>
                    </div>
                </div>
                <div class="form-options">
                    <label class="agree-terms">
                        <input type="checkbox" id="agree-terms" required>
                        <span>我同意 <a href="#" class="terms-link">服务条款</a> 和 <a href="#" class="privacy-link">隐私政策</a></span>
                    </label>
                </div>
                <button type="submit" class="register-submit-btn">注册</button>
            </form>
            <p class="login-link">
                已有账号？ <a href="#" onclick="switchToLogin(event)">立即登录</a>
            </p>
        </div>
    </div>
      </div>
    <script src="{% static 'js/vue-2.5.16.js' %}"></script>
    <script src="{% static 'js/axios-0.18.0.min.js' %}"></script>
    <script src="{% static 'script.js' %}"></script>
    <script src="{% static 'js/host.js' %}"></script>
    <script src="{% static 'js/common.js' %}"></script>
    <script src="{% static 'js/index.js' %}"></script>
    <script src="{% static 'js/register.js' %}"></script>

</body>
</html> 